<template>
  <div id="union-select">
    <el-form inline label-width="20px">
      <el-form-item v-if="items.length==0">
        <el-select :placeholder="placeholder" filterable v-model="values[0]">
          <el-option label="请选择" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-for="(item,index) of items" :key="index">
        <el-select @change="change(item)" :disabled="items.length - 1 != index"  filterable v-model="values[index]" :placeholder="placeholder">
          <el-option v-for="(opt,i) of item" :key="i" :label="opt.label" :value="opt.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-tooltip class="item" effect="light" content="清空" placement="right-start">
          <el-link @click="clear" icon="el-icon-remove-outline" type="danger" :underline="false"></el-link>
        </el-tooltip>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  export default {

    data() {
      return {
        items: [],
        values: [],
        item: {},
        currentDatas:[],
        choseItem:{}
      }
    },
    watch:{
      values:{
        handler(){
          let value = this.values[this.values.length-1]
          if (this.common.isEmpty(value)){
            value = this.initValue
          }
          this.getList(value)
        },
        deep:true
      }
    },
    mounted() {
      let flag = true
       for (let i = 0; i < 3; i++) {
          setTimeout(()=>{
            if (this.common.isNotEmpty(this.url) && flag){
              this.init()
              flag = false
            }
          },500)
        }
    },
    methods: {
      change(value){
        let choseValue = this.values[this.values.length-1]
        for (let i = 0; i < value.length; i++) {
          let item = value[i]
          if (choseValue == item[this.value]) {
            this.choseItem = item
          }
        }
        this.$emit('choseItem',this.choseItem,this.choseKey)
      },
      clear(){
        this.items=[]
        this.item={}
        this.currentDatas=[]
        this.choseItem={}
        this.values=[]
        this.$emit('choseItem',this.choseItem,this.choseKey)
      },
      init() {
        this.getList(this.initValue)
      },
      getList(value){
        let _that = this
        let param = {}
        param[_that.paramField] = value
        this.common.request({
          url: this.url,
          param: param,
          permission: this.permission,
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.currentDatas = res.data.rows
              let items = _that.itemsToLabel(res.data.rows)
              if (items.length==0){
                return
              }
              if (_that.items.length == 0 || items[0][_that.paramField] != items[0][_that.value]) {
                this.items.push(items)
              }
            }
          }
        })
      },
      itemsToLabel(itemsData) {
        let items = []
        for (let i = 0; i < itemsData.length; i++) {
          const item = itemsData[i]
          item.label = item[this.label]
          item.value = item[this.value]
          item.paramField = item[this.paramField]
          items.push(item)
        }
        return items
      }
    },
    name: "union-select",
    props: {
      label: {
        type: String,
        default() {
          return 'name'
        }
      },
      value: {
        type: String,
        default() {
          return "id"
        }
      },
      initValue: {
        type: String,
        default() {
          return '0'
        }
      },
      url: {
        type: String
      },
      paramField: {
        type: String,
        default() {
          return 'parentId'
        }
      },
      permission: {
        type: String,
        default() {
          return ''
        }
      },
      placeholder:{
        type:String,
        default(){
          return '请选择'
        }
      },
      choseKey:{
        type:String,
        default(){
          return ''
        }
      }
    }
  }
</script>

<style scoped>

</style>
